import React from 'react';
import { Table} from 'dw-mx';
import {DateCell, StringCell} from "dw-mx-table"
const { Column } = Table;
import moment from "moment";

export default function ReadonlyString() {
    const data = [
        {
            key: '1',
            date: new Date(),
            moment: moment(),
            empty: null,
            string: "20121212",
            number: 20121212
        }
    ];

    return (
        <Table scroll={{ x: 880 }} dataSource={data} bordered>
            <Column ellipsis={true} title="序号" key="no" align={'center'} width={40}
                    render={(value, record, index) => {
                        return <StringCell value={index+1}/>;
                    }}/>
            <Column ellipsis={true} title="Date" dataIndex="date" key="date" align={'center'} width={120}
                    render={(value, record, index) => {
                        return <DateCell value={value}/>;
                    }}/>
            <Column ellipsis={true} title="Moment" dataIndex="moment" key="date" align={'center'} width={120}
                    render={(value, record, index) => {
                        return <DateCell value={value} align={"right"} mask={"YYYY/MM/DD HH:mm:ss"} style={{color:'red'}}/>;
                    }}/>
            <Column ellipsis={true} title="Empty" dataIndex="empty" key="empty" align={'center'} width={120}
                    render={(value, record, index) => {
                        return <DateCell value={value} align={"left"} mask={"YYYY/MM/DD HH:mm:ss"}/>;
                    }}/>
            <Column ellipsis={true} title="String" dataIndex="string" key="string" align={'center'} width={120}
                    render={(value, record, index) => {
                        return <DateCell value={value} mask={"YYYY/MM/DD HH:mm:ss"} sourceMask={"YYYYMMDD"}/>;
                    }}/>
            <Column ellipsis={true} title="Number" dataIndex="number" key="number" align={'center'} width={120}
                    render={(value, record, index) => {
                        return <DateCell value={value} mask={"YYYY/MM/DD HH:mm:ss"} sourceMask={"YYYYMMDD"}/>;
                    }}/>
        </Table>
    );
}